<template>
	<!--  -->
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-select
							v-model="search.user_id"
							placeholder="选择员工"
							clearable
							filterable
						>
							<el-option
								v-for="(item, index) in userList"
								:key="index"
								:label="item.user_name"
								:value="item.user_id"
							/>
						</cl-select>
						<cl-filter label="支付日期">
							<cl-date-picker
								clearable
								v-model="search.timeList"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								style="width: 210px"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
				<el-row>
					<el-button type="primary" @click="addRecord">新增</el-button>
				</el-row>
			</template>
			<el-row>
				<cl-table v-bind="tableProp">
					<template #column-is_paid="{ scope: { row } }">
						<el-tag :type="row.is_paid == 1 ? 'primary' : 'danger'">
							{{ row.is_paid == 1 ? "已付款" : "未付款" }}</el-tag
						>
					</template>
					<template #column-images="{ scope: { row } }">
						<div
							style="display: flex;align-items: center; cursor: pointer;"
							@click="openImages(row)"
						>
							<span v-if="row.images.length" style="margin-right: 5px;"
								>+{{ row.images.length }}</span
							>
							<div>
								<template v-for="item in row.images.slice(0, 3)">
									<el-image
										style="width: 50px; height: 50px ;margin-left: 5px;"
										:src="item"
									></el-image>
								</template>
							</div>
						</div>
					</template>
					<template #column-opt="{ scope: { row } }">
						<el-button type="danger" v-if="row.del == 1" @click="delrow(row)"
							>删除</el-button
						>
					</template>
				</cl-table></el-row
			>
			<template slot="foot">
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<AddRecordDialog ref="addRecordDialogRef" @successed="refresh" />
	</cl-crud>
</template>

<script>
import AddRecordDialog from "./components/addRecordDialog.vue";
import dayjs from "dayjs";
import pageMinix from "@/mixins/page";
export default {
	mixins: [pageMinix],
	components: {
		AddRecordDialog
	},
	data() {
		return {
			search: {
				timeList: [
					dayjs(new Date()).format("YYYY-MM-DD"),
					dayjs(new Date()).format("YYYY-MM-DD")
				]
			},
			tableProp: {
				columns: [
					//{
				//		label: "付款时间",
				//		prop: "pay_time",
				//		minWidth: 100,
				//		showOverflowTooltip: true
				//	},
					{
						label: "订单内容",
						prop: "name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "客服",
						prop: "user_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "备注",
						prop: "remark",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "使用状态",
						prop: "used_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},

					{ label: "操作", prop: "opt", width: 200, fixed: "right", disable: true }
				]
			},
			biz_id: null,
			userList: []
		};
	},
	created() {
		this.biz_id = this.getCurrBiz();
		this.getUserList();
	},
	mounted() {},
	methods: {
		// 员工列表
		async getUserList() {
			let data = await this.$service.user
				.setDeptuserlists({ post: 1, biz_id: this.biz_id })
				.done(() => {
					this.saving = false;
				});

			this.userList = data;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.deposit)
				.set("dict", {
					api: {
						page: "allBillList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			const { list } = await next(params);
			render(list);
		},
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		addRecord() {
			this.$refs.addRecordDialogRef.open();
		},
		delrow(row) {
			this.$alert("确定删除吗？", "提示", {
				confirmButtonText: "确定",
				callback: async action => {
					console.log(action);
					if (action == "confirm") {
						await this.$service.deposit.delBill({ id: row.id });
						this.$message.success("操作成功");
						this.refresh();
					}
				}
			});
		}
	}
};
</script>
<style scoped lang="scss"></style>
